<style type="text/css">
	.outter {
		float: left;
		width: 100%;
	}
	
	.inner {
		width: 700px;
		margin: auto;
	}
	
	.header {
		background: #EEE;
		font-size: 20px;
	}
	
	.minImg {
		width: 40px;
		height: 40px;
	}
	
	ul, li {
		float: left;
		border: 1px solid #EEE;
		margin: 2px;
	}
	
	li span {
		text-align: center;
		vertical-align: middle;
	}
	
	.id {
		float: left;
		width: 100px;
	}
	
	.img {
		float: left;
		width: 50px;
	}
	
	.title {
		float: left;
		width: 300px;
	}
	
	.created {
		float: left;
		width: 150px;
	}
	
	.remove {
		float:left;
		width: 80px;
	}
</style>
<script type="text/javascript">
function add()
{
	location.href = '/image_posts/add';
}

function removePost(id)
{
	//alert(id);
	location.href = '/image_posts/remove/?id=' + id;
}
</script>
<div class="outter">
	<div class="inner">
		<div class="header">
			<p>Image board</p>
			<div>
				<input type="button" value="글쓰기" onclick="javascript:add();"  style="cursor: pointer;"/>
			</div>
		</div>
		<ul style="float: left;">
			<li class="subject">
				<span class="id">글번호</span>
				<span class="img">이미지</span>
				<span class="title">제목</span>
				<span class="created">날짜</span>
				<span class="remove">삭제</span>
			</li>
			<?php foreach($imagePosts as $post): ?>
				<li>
					<?php echo "<a href='/view/?id=" . $post['ImagePost']['id'] . "'>";  ?>
						<span class="id">
							<?php echo $post['ImagePost']['id'];?>
						</span>
						<span class="img">
						<?php echo "<img class='minImg' src='".$webUploadRoot.$post['ImagePost']['image_source']."' \/>";?>
						</span>
						<span class="title">
							<?php echo  $post['ImagePost']['title'];?>
						</span>
					<?php echo "</a>"; ?>
					<span class="created">
						<?php echo $post['ImagePost']['created'];?>
					</span>
					<span class="remove" onclick="javascript:removePost('<?php echo $post['ImagePost']['id']?>');" style="cursor: pointer;">Delete</span>
				</li>
			<?php endforeach;?>
		</ul>
	</div>
</div>